<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>答题系统</title>
    <link rel="stylesheet" href="Stylesheet.css" />
</head>
<link rel="stylesheet" href="" />

<body>

    <div id="main">

        <div id="examTitle">
            <h1>未央暮城自主考试系统</h1>
            <div id="timing">
                <time id="timer"></time>
                <button id="suspend">||</button>
            </div>
        </div>
        <div id="itemSelection">
            <div id="itemChoose"></div>
            <ul id="markInfo">
                <li>当前<span class="nowAnswer"></span></li>
                <li>未做<span class="noAnswer"></span></li>
                <li>待查<span class="markAnswer"></span></li>
                <li>已做<span class="yesAnswer"></span></li>
            </ul>
        </div>
        <div id="answer">
            <div id="info">
                <h2>财经法规与会计职业道德考试</h2>
            </div>
            <div id="item">
                <i id="index"> 1丨单选题</i>
                <p id="describe"></p>
                <ul id="option"></ul>
                <div id="explain">
                    <p>【答案解析】</p>
                    <p id="knowledge"></p>

                </div>
            </div>


            <div id="ctrlBtn">
                <button id="prevItem">上一题</button>
                <button id="nextItem">下一题</button>
                <button id="calculator">计算器</button>
                <button id="markItem">设置待查</button>
                <button id="submit">交卷</button>
            </div>
        </div>
    </div>

    <div id="blackCover">
        <div>
            <span>提示</span>
            <p id="information">当前考试已暂停，点击下方按钮继续答题</p>
            <button id="goOn">继续</button>
        </div>
    </div>

    <script src="subject.js"></script>
    <script>
    //配置信息设置
    var indexItem = 0; //全局变量，当前的题目编号
    var maxtime = 60 * 60; //一个小时，按秒计算，自己调整!
    var itemCouAll = subject[subject.length - 1].order; //大题总数
    var t; //定时器

    window.onload = function() {

        // ----- 填充HTML ------

        var orderNo = [];

        //写入各个大题的div
        var itemChooseHTML = '';
        for (var i = 0; i < itemCouAll; i++) {
            itemChooseHTML +=
                `
                    <div id = ${'order'+i} >
                        <button> - </button>
                        <p>第${i+1}道大题</p>
                        <ul></ul>
                    </div>
                `
        }
        document.getElementById('itemChoose').innerHTML = itemChooseHTML;


        //写入div下的ul li

        //获取每个div下应有多少li
        var orderCou = [];
        for (var i = 0; i < itemCouAll; i++) {
            var m = 0;
            for (var j = 0; j < subject.length; j++) {
                if (subject[j].order === i + 1) {
                    m++;
                }
            }
            orderCou[i] = m;
        }

        for (var i = 0; i < itemCouAll; i++) {
            var optionHTML = '';
            for (var j = 0; j < orderCou[i]; j++) {
                optionHTML += `<li class="noAnswer">${j+1}</li>`
            }
            document.getElementById('order' + i).getElementsByTagName("ul")[0].innerHTML = optionHTML;
        }


        //绑定各个li，注意这里的i的作用域，可使用虚拟属性，参考https://www.cnblogs.com/wangyongshf/p/7466799.html
        var liList = document.getElementById('itemChoose').getElementsByTagName('li');
        for (var i = 0; i < liList.length; i++) {
            liList[i].index = i;
            liList[i].onclick = function() {
                indexItem = this.index;
                refresh();
            }
        }

        //设置各个li的class，是否符合回答规范、设置了待查标记
        for (var i = 0; i < liList.length; i++) {

            liList[i].className = YesOrNo(i);

            if (subject[i].mark) { //设置待查标记
                liList[i].classList.add('markAnswer');
            } else {
                liList[i].classList.remove('markAnswer');
            }

        }

        // 开始倒计时
        document.getElementById('suspend').innerHTML = '||';
        t = setInterval("CountDown()", 1000);

        refresh(); //加载题目

    }

    // ------ 计时程序 -----
    function CountDown() {
        if (maxtime >= 0) {
            //写入HTML
            hours = checkTime(parseInt(maxtime / 60 / 60) % 60);
            minutes = checkTime(parseInt(maxtime / 60) % 60);
            seconds = checkTime(parseInt(maxtime % 60));
            msg = hours + ":" + minutes + ":" + seconds;
            document.getElementById("timer").innerHTML = msg;

            maxtime--;

            if (maxtime === 5 * 60) {
                document.getElementById('information').innerHTML = "还剩5分钟，点击下方按钮继续答题";
                document.getElementById('suspend').click();
            }

        } else {
            clearInterval(t);
            alert("时间到，结束!");
            //开始结算
        }
    }

    function checkTime(i) { //将0-9的数字前面加上0，例1变为01
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }



    //
    //题目刷新
    //
    function refresh() {
        //题目序号与题目类型描述文本
        var itemType = ''; //单选题、多选题
        switch (subject[indexItem].type) {
            case "single":
                itemType = '单选题';
                break;
            case "judge":
                itemType = '判断题';
                break;
            case "multiple":
                itemType = '多选题';
                break;
            case "indeterminate":
                itemType = '不定项';
                break;
        }
        document.getElementById("index").innerHTML = indexItem + 1 + '丨' + itemType;

        //题目描述
        var describeText = "";
        describeText += subject[indexItem].describe;
        document.getElementById("describe").innerHTML = describeText;

        //答案选项
        var optNum = subject[indexItem].option.length;
        var optionText = "";
        var inputType = "";
        var inputName = subject[indexItem].type;
        switch (subject[indexItem].type) {
            case "single":
            case "judge":
                inputType = "radio";
                break;
            case "multiple":
            case "indeterminate":
                inputType = "checkbox";
                break;
        }

        for (var i = 0; i < optNum; i++) {
            var itemChecked = '';
            if (subject[indexItem].type === 'indeterminate' || subject[indexItem].type === 'multiple') {
                if (subject[indexItem].answer.charAt(i) !== '_' && subject[indexItem].answer.charAt(i) !== '') {
                    itemChecked = 'checked="checked"';
                }
            } else {
                if (subject[indexItem].answer === String.fromCharCode(65 + i)) {
                    itemChecked = 'checked="checked"';
                }
            }

            optionText +=
                `
                <li>
                    <input type=${inputType} name="opt" value= ${String.fromCharCode(65 + i)} ${itemChecked}/>
                    <i>${String.fromCharCode(65 + i)}</i>
                    <p>${subject[indexItem].option[i]}</p>
                </li>
                `
        }
        document.getElementById("option").innerHTML = optionText;

        //答案解析
        document.getElementById("knowledge").innerHTML = subject[indexItem].explain;

        //按钮禁用状态
        if (indexItem === 0) {
            document.getElementById("prevItem").className += "enable";
        } else if (indexItem === subject.length - 1) {
            document.getElementById("nextItem").className += "enable";
        } else {
            document.getElementById("prevItem").className = "";
            document.getElementById("nextItem").className = "";
        }

        //待查状态设置
        if (subject[indexItem].mark == 1) { //这里==表示约等于，true也可以视为1
            document.getElementById('markItem').innerHTML = '取消待查';
        } else {
            document.getElementById('markItem').innerHTML = '设置待查';
        }


        //设置左侧答题卡对应题目为当前
        var liList = document.getElementById('itemChoose').getElementsByTagName('li');
        for (var i = 0; i < liList.length; i++) {
            if (i === indexItem) {
                liList[i].classList.add('nowAnswer');
            } else {
                liList[i].classList.remove('nowAnswer');
            }
        }

        BindOpt(); //重新绑定点击选项的事件

    }


    //上/下一题按钮绑定
    document.getElementById("prevItem").onclick = function() {
        if (indexItem) {
            indexItem--;
            refresh();
        }
    }

    document.getElementById("nextItem").onclick = function() {
        if (indexItem < subject.length - 1) {
            indexItem++;
            refresh();
        }
    }


    //设置标记按钮绑定
    document.getElementById('markItem').onclick = function() {
        if (this.innerHTML === '设置待查') {
            //左侧的class增加markAnswer
            subject[indexItem].mark = 1;
            this.innerHTML = '取消待查';
            document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('markAnswer');
        } else { //恢复原始的答题状态
            subject[indexItem].mark = 0;
            this.innerHTML = '设置待查';
            document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('markAnswer');
        }
    }

    //绑定选项按钮单击事件
    function BindOpt() {
        for (var i = 0; i < document.getElementById("option").getElementsByTagName('input').length; i++) {

            document.getElementById("option").getElementsByTagName('input')[i].onchange = function() {
                //将当前答案写到JSon中

                subject[indexItem].answer = ''; //清除原有答案
                for (var j = 0; j < document.getElementById("option").getElementsByTagName('input').length; j++) {
                    if (document.getElementById("option").getElementsByTagName('input')[j].checked) {
                        subject[indexItem].answer += document.getElementById("option").getElementsByTagName('input')[j].value;
                    } else {
                        if (subject[indexItem].type === 'multiple' || subject[indexItem].type === 'indeterminate') {
                            subject[indexItem].answer += '_';
                        }
                    }
                }

                //改变左侧答题卡显示状态
                //
                if (YesOrNo(indexItem) === 'noAnswer') {
                    document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('noAnswer');
                    document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('yesAnswer');
                } else {
                    document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('yesAnswer');
                    document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('noAnswer');
                }

            }
        }
    }

    //绑定计时按钮
    document.getElementById('suspend').onclick = function() {

        if (this.innerHTML === '||') {
            this.innerHTML = '►';
            clearInterval(t);
        } else {
            this.innerHTML = '||';
            t = setInterval("CountDown()", 1000);
        }
        BlackCover();
    }

    function BlackCover() {
        var bCover = document.getElementById('blackCover');
        if (bCover.classList.contains('black')) {
            bCover.classList.remove('black');
        } else {
            bCover.classList.add('black');
        }
    }

    document.getElementById('goOn').onclick = function() {

        document.getElementById('suspend').click();
    }


    //判断当前题目是否已作答
    function YesOrNo(index) {

        if (subject[index].type === 'multiple') {

            var ans = new Array();
            ans[0] = RepeatNum('_', subject[index].option.length);

            for (var i = 0; i < subject[index].option.length; i++) {
                ans[i + 1] = RepeatNum('_', i) + String.fromCharCode(65 + i) + RepeatNum('_', subject[index].option.length - 1 - i);
            }
            var blockJudge = false; //是否为空
            for (var j = 0; j < ans.length; j++) {
                if (subject[index].answer === ans[j]) {
                    blockJudge = true;
                    break;
                }
            }

            if (blockJudge || subject[index].answer === '') {
                return 'noAnswer';
            } else {
                return 'yesAnswer';
            }

        } else {
            if (subject[index].answer !== '' && subject[index].answer !== RepeatNum('_', subject[index].option.length)) {
                return 'yesAnswer';
            } else {
                return 'noAnswer';
            }
        }
    }


    //打印num个str，如times(n,3) nnn
    function RepeatNum(str, num) {
        if (num > 1) {
            return str += RepeatNum(str, --num);
        }
        if (num === 1) {
            return str;
        } else {
            return '';
        }
    }

    document.getElementById('submit').onclick = function() {
        var htmlText = '';
        var account = 0; //总得分
        for (var i = 0; i < subject.length; i++) {

            //计算当前题目得分
            var nowAccount;
            if (subject[i].type === 'single') {
                if (subject[i].answer === '' || subject[i].answer !== subject[i].solution) {
                    nowAccount = 0;
                } else {
                    nowAccount = 2;
                }
            } else if (subject[i].type === 'judge') {
                if (subject[i].answer === '' || subject[i].answer !== subject[i].solution) {
                    nowAccount = -0.5;
                } else {
                    nowAccount = 1;
                }
            } else if (subject[i].type === 'indeterminate') {
                if (subject[i].answer === '') { //如果未填写答案
                    nowAccount = 0;
                } else {
                    var hasError = false; //假设没有错误选项
                    for (var j = 0; j < subject[i].option.length; j++) {
                        if (subject[i].answer.charAt(j) !== '_' && subject[i].solution.charAt(j) === '_') { //有错误选项
                            hasError = true;
                            break;
                        }
                    }
                    if (hasError) {
                        nowAccount = 0;
                    } else {
                        nowAccount = subject[i].answer.replace(/_/g, "").length / subject[i].solution.replace(/_/g, "").length * 4;
                    }

                }
            } else { //多选题
                if (subject[i].answer === '') { //如果未填写答案
                    nowAccount = 0;
                } else {
                    var hasError = false; //假设没有错误选项
                    for (var j = 0; j < subject[i].option.length; j++) {
                        if (subject[i].answer.charAt(j) !== '_' && subject[i].solution.charAt(j) === '_') { //有错误选项
                            hasError = true;
                            break;
                        }
                    }
                    if (hasError) {
                        nowAccount = 0;
                    } else {
                        if (subject[i].answer === subject[i].solution) { //全部正确
                            nowAccount = 4;
                        } else {
                            if (subject[i].answer.replace(/_/g, "").length >= 4) {
                                nowAccount = 3;
                            } else {
                                nowAccount = subject[i].answer.replace(/_/g, "").length;
                            }
                        }
                    }
                }
            }
            htmlText += '题目' + i + '  答案' + subject[i].solution + '            回答' + subject[i].answer + '          得分' + nowAccount.toFixed(2) + '\n';
            account += nowAccount;
        }

        alert(htmlText + '\n总得分：' + account.toFixed(2));
    }


    document.getElementById('calculator').onclick = function() {
        Run('calc');
    }


    </script>

</body>

</html>
